<template>
  <div class="page-container">
    <div class="container">
    <h1>我的绩效考核历史</h1>

    <!-- 表格展示 -->
    <el-table :data="performanceRecords" border stripe style="width: 100%">
      <el-table-column prop="id" label="绩效记录ID" width="150" align="center" />
      <el-table-column prop="performanceIndicator" label="绩效指标"  align="center" />
      <el-table-column prop="performanceFeedback" label="绩效反馈"  align="center" />
      <el-table-column prop="performanceScore" label="绩效得分" width="150" align="center" />
      <el-table-column prop="createdAt" label="创建时间" width="200" align="center">
        <template #default="scope">
          <span>{{ formatDate(scope.row.createdAt) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="handlePageChange"
    />
  </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import axios from "axios";

export default {
  setup() {
    const performanceRecords = ref([]); // 绩效记录
    const total = ref(0); // 总记录数
    const currentPage = ref(1); // 当前页码
    const pageSize = ref(10); // 每页显示数量

    // 获取绩效数据
    const fetchPerformanceRecords = async (page = currentPage.value, size = pageSize.value) => {
      try {
        const employeeId = JSON.parse(sessionStorage.getItem("userInfo")).employeeId; // 从 sessionStorage 获取员工ID
        const response = await axios.get("http://localhost:8080/employee/getPerformance", {
          params: { employeeId, page, size },
        });
        const { records, total: totalRecords } = response.data.data;
        performanceRecords.value = records;
        total.value = totalRecords;
      } catch (error) {
        console.error("获取绩效考核数据失败", error);
      }
    };

    // 处理分页变化
    const handlePageChange = (newPage) => {
      currentPage.value = newPage;
      fetchPerformanceRecords(newPage, pageSize.value);
    };

    // 日期格式化
    const formatDate = (date) => {
      if (!date) return "";
      const d = new Date(date);
      return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
    };

    // 页面加载时获取数据
    onMounted(() => {
      fetchPerformanceRecords();
    });

    return {
      performanceRecords,
      total,
      currentPage,
      pageSize,
      fetchPerformanceRecords,
      handlePageChange,
      formatDate,
    };
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #409eff;
}

.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
